<script lang="ts">
import { defineComponent, ref, computed, watch } from "vue";
import { UserModule } from "@/store/modules/user";
import { getUserInfo, getParameter } from "@/api/nodeapi";
import { useI18n } from "vue-i18n";
import { showToast, showDialog, showConfirmDialog } from "vant";
import Clipboard from "clipboard";

export default defineComponent({
    setup() {
        const { t } = useI18n();

        const pageLoading = ref(true);
        const userInfo = ref({});
        const fromSun = computed(() => {
            return (data) => {
                return tronWeb.fromSun(data);
            };
        });
        const toSun = computed(() => {
            return (data) => {
                return tronWeb.toSun(data);
            };
        });
        const loadData = async () => {
            try {
                getUserInfo().then((res) => {
                    userInfo.value = res.data.data.UserInfo || {};
                });
                pageLoading.value = false;
            } catch (error) {}
        };
        const shareAddress = computed(() => {
            return (
                window.location.origin +
                "/#/node?referrer=" +
                userInfo.value.InvitationCode
            );
            return "";
        });
        const copy = async (id: string) => {
            const clipboard = new Clipboard(id);
            clipboard.on("success", () => {
                showToast({
                    message: t("layout.copySuccessfully"),
                    icon: "checked",
                    className: "_showToast",
                });
                clipboard.destroy();
            });
            clipboard.on("error", () => {
                showToast(t("layout.fail"));
                clipboard.destroy();
            });
        };
        watch(
            () => UserModule.userAddr,
            (newUserAddr: string) => {
                if (newUserAddr) {
                    loadData();
                }
            },
            { immediate: true }
        );
        return {
            userInfo,
            shareAddress,
            fromSun,
            toSun,
            copy,
        };
    },
});
</script>

<template>
    <div class="clipboardBlock" v-if="userInfo.InvitationCode">
        <div
            class="userAddr userAddr1"
            @click="copy('.userAddr1')"
            :data-clipboard-text="userInfo.InvitationCode"
        >
            <div class="van-ellipsis">
                {{ $t("layout.Myinvitationcode") }}：<span>{{
                    userInfo.InvitationCode
                }}</span>
            </div>
            <svg
                xmlns="http://www.w3.org/2000/svg"
                width="13"
                height="15"
                viewBox="0 0 13 15"
                fill="none"
            >
                <rect
                    x="0.5"
                    y="0.5"
                    width="10"
                    height="12"
                    rx="1.5"
                    stroke="#EB0029"
                />
                <line x1="3" y1="3.5" x2="8" y2="3.5" stroke="#EB0029" />
                <line x1="3" y1="6.5" x2="8" y2="6.5" stroke="#EB0029" />
                <line x1="3" y1="9.5" x2="8" y2="9.5" stroke="#EB0029" />
                <path
                    d="M11.2041 2.01074C12.2128 2.113 13 2.96435 13 4V13L12.9893 13.2041C12.8938 14.1457 12.1457 14.8938 11.2041 14.9893L11 15H4L3.7959 14.9893C2.85435 14.8938 2.1062 14.1457 2.01074 13.2041L2 13H3C3 13.5523 3.44772 14 4 14H11C11.5523 14 12 13.5523 12 13V4C12 3.44772 11.5523 3 11 3V2L11.2041 2.01074Z"
                    fill="#EB0029"
                />
            </svg>
        </div>
        <!--  -->
        <div
            class="userAddr userAddr2"
            @click="copy('.userAddr2')"
            :data-clipboard-text="shareAddress"
        >
            <div class="van-ellipsis">
                {{ $t("layout.Myinvitationlink") }}：<span>{{
                    shareAddress
                }}</span>
            </div>
            <svg
                xmlns="http://www.w3.org/2000/svg"
                width="13"
                height="15"
                viewBox="0 0 13 15"
                fill="none"
            >
                <rect
                    x="0.5"
                    y="0.5"
                    width="10"
                    height="12"
                    rx="1.5"
                    stroke="#EB0029"
                />
                <line x1="3" y1="3.5" x2="8" y2="3.5" stroke="#EB0029" />
                <line x1="3" y1="6.5" x2="8" y2="6.5" stroke="#EB0029" />
                <line x1="3" y1="9.5" x2="8" y2="9.5" stroke="#EB0029" />
                <path
                    d="M11.2041 2.01074C12.2128 2.113 13 2.96435 13 4V13L12.9893 13.2041C12.8938 14.1457 12.1457 14.8938 11.2041 14.9893L11 15H4L3.7959 14.9893C2.85435 14.8938 2.1062 14.1457 2.01074 13.2041L2 13H3C3 13.5523 3.44772 14 4 14H11C11.5523 14 12 13.5523 12 13V4C12 3.44772 11.5523 3 11 3V2L11.2041 2.01074Z"
                    fill="#EB0029"
                />
            </svg>
        </div>
    </div>
</template>

<style lang="less" scoped>
& {
    .clipboardBlock {
        margin-top: 20px;
        padding: 10px 30px 40px 30px;
        border-radius: 20px;
        border: 1px solid #ffccd5;
        background: #fff7f7;
        .userAddr {
            padding-top: 30px;
            display: flex;
            align-items: center;
            color: #000;
            font-size: 20px;
            font-weight: 900;
            span {
                color: #eb0029;
                font-size: 24px;
                font-weight: 400;
            }
            svg {
                display: block;
                margin-left: 12px;
                cursor: pointer;
            }
        }
    }
    @media (max-width: 1000px) {
        & {
            .clipboardBlock {
                margin-top: 0;
                padding: 0;
                background: transparent;
                border: none;
                .userAddr {
                    margin-top: 16px;
                    padding: 26px 16px;
                    display: flex;
                    align-items: center;
                    color: #000;
                    font-size: 16px;
                    font-weight: 900;
                    border-radius: 20px;
                    border: 1px solid #ffccd5;
                    background: #fff7f7;
                    span {
                        font-size: 16px;
                    }
                    svg {
                        display: block;
                        margin-left: 12px;
                        cursor: pointer;
                        width: 13px;
                        height: 15px;
                        flex-shrink: 0;
                    }
                }
            }
        }
    }
}
</style>
